<template>
    <div class="login-wraper">
        <img src="@/assets/login-logo.png" alt="" class="login-logo">
        <div class="login-content">
            <div class="login-left">
                <img src="@/assets/color-bg..png" alt="" width="400">
            </div>
            <div class="login-right">
                <div class="login-right__tab">
                    <div class="login-right__tab--title login-right__tab--active">
                        登录CRM
                    </div>
                    <div>

                    </div>
                </div>
                <div style="margin-top: 50px;">
                    <el-form :rules="rules" ref="loginForm" :model="loginForm" class="input-block">
                        <el-form-item prop="userName" class="el-input--medium" style="width: 320px;">
                            <el-input v-model="loginForm.userName" placeholder="请输入登录账号"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="loginForm.password" placeholder="请输入登录密码" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="input-block__submit" type="primary" :disabled="isdisabled" @click="subButton()">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                userName: "",
                password: ""
            },
            isdisabled: true,
            rules: {
                userName: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' }
                ],
            }
        }
    },
    watch: {
        'loginForm.userName': 'validateForm',
        'loginForm.password': 'validateForm'
    },
    methods: {
        validateForm() {
            this.$refs["loginForm"].validate((valid) => {
                this.isdisabled = !valid;
            });
        },
        subButton(){
            this.$refs["loginForm"].validate((valid) => {
                if(valid){
                    this.$axios.get('./static/login.json').then(resp => {
                        if(this.userName == resp.data.userName && this.password == resp.data.password){
                            this.$router.push('/main');
                        }
                    })
                } else {

                }
            })
        }
    }
}
</script>

<style>
.login-logo {
    left: 36px;
    position: absolute;
    top: 36px;
    width: 136px
}

.login-wraper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    min-width: 800px;
    position: relative
}

.login-content {
    border-radius: 8px;
    box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .1);
    display: flex;
    height: 500px;
    overflow: hidden;
    width: 800px
}

.login-left {
    align-items: center;
    background-color: #f2f3f5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.login-right {
    box-sizing: border-box;
    padding: 40px 40px 0
}

.login-right__tab {
    align-items: center;
    color: #969799;
    cursor: pointer;
    display: flex;
    font-style: normal
}

.login-right__tab--active {
    color: #323233
}

.login-right__tab--title:after {
    color: #c9cdd4;
    content: "|";
    margin: 0 20px
}

.login-right__tab {
    align-items: center;
    color: #969799;
    cursor: pointer;
    display: flex;
    font-style: normal
}

.input-block {
    margin: 0 0 20px
}

.login-right .el-input__inner {
    height: 40px;
    line-height: 40px
}

.el-input--medium {
    font-size: 14px
}

.input-block__submit {
    font-size: 18px;
    height: 40px;
    letter-spacing: 6px;
    margin-top: 10px;
    width: 100%;
    background-color: #ff6a00;
}
</style>